<template>
    <div v-if="item.shuId" class="shell-view">
        <div v-if="item.shuId" class="img">
            <img :src="require(`@/assets/shells/${item.shuId}.jpg`)" />
        </div>

        <div class="info row">
            <div class="shu-name">{{ item.shuName }}</div>
            <div class="shu-id">{{ item.shuId }}</div>
            <div class="icon">
                <img
                    src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-09/p2mn4f1kzfjyi7qd906ordjqg7n75dd2_.png"
                />
            </div>
        </div>

        <div class="shell-items">
            <div
                class="shell-item"
                v-for="(shell, index) in item.items"
                :key="index"
            >
                <span>{{ shell[0] }}</span>
                <span>{{ shell[2].split(" ")[1] }}</span>
                <!-- <span class="text-overflow-ellipsis-1">{{ shell[3] }}</span> -->
            </div>
        </div>

        <div class="tags row">
            <div v-for="(tag, index) in tags" :key="index" class="tag">
                {{ tag }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: Object
    },
    data() {
        return {};
    },

    computed: {
        tags() {
            return [this.item.ganId, this.item.muId, this.item.keId];
        }
    },

    created() {
        // console.log(this.item.items);
    },

    methods: {
        toDetailPage() {
            this.$router.push({
                path: ""
            });
        }
    }
};
</script>


<style lang="less" scoped>
.shell-view {
    flex: 1 1 auto;
    box-sizing: border-box;
    overflow-y: scroll;
    padding: 0 30px;

    .img {
        font-size: 0;
        img {
            width: 100%;
        }
    }

    .info {
        padding: 20px 0;
        font-size: 30px;
        align-items: center;
        justify-content: space-between;
        .shu-name {
            font-weight: 600;
            margin-right: 30px;
            line-height: 40px;
        }

        .shu-id {
            flex: 1 1 auto;
            color: #888;
            line-height: 40px;
        }

        .icon {
            width: 40px;
            height: 40px;
        }
    }

    .shell-items {
        font-size: 24px;
        color: #666;

        .shell-item {
            overflow: hidden;
            margin-bottom: 15px;
        }
    }

    .tags {
        padding: 0 0 30px 0;
        .tag {
            font-size: 24px;
            border: 1px solid #aaa;
            padding: 10px 10px;
            border-radius: 10px;
            margin-right: 20px;
        }
    }
}
</style>